<template>
    <div class="login">
        <!--登录的组件页面-->
        <label>
            <span class="label-style">用户名：</span>
            <el-input placeholder="请输入内容" v-model="username" clearable size="medium" class="input-size"></el-input>
        </label>
        <label>
            <span class="label-style">密码：</span>
            <el-input placeholder="请输入密码" v-model="password" show-password size="medium" class="input-size"></el-input>
        </label>
        <el-button type="primary" @click="login()">登录</el-button>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                username: "huangjh",
                password: "HHHabc123!@#$",
                info: ''
            }
        },
        created() {
            // 清理缓存
            this.$store.commit("clearStateParams");
        },
        methods: {
            login() {
                // 显示遮罩层
                this.$axios.$PostJson({
                    url: "/accountLogin",
                    data: {
                        "username": this.username,
                        "cruxCode": this.password,
                    },
                }, result => {
                    // 清楚缓存
                    var resultData = result.data;
                    if (resultData.statusCode == "200") {
                        // 登录成功
                        // 设置store的值,存放user
                        this.$store.commit("dealUser", resultData.data);
                        // 跳转到首页
                        this.$router.push({name: "index"});

                    } else if (resultData.statusCode == "601") {
                        // 登录失败
                        this.$layer.showError("用户名或者密码错误", 3000, () => {
                            this.password = "";
                        });
                    }

                }, error => {
                    this.$layer.showError("登录请求异常，请联系管理员", 3000, () => {
                    });
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .login {
        margin: auto;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 200px;
        padding-top: 300px;

        .label-style {
            display: inline-block;
            width: 100px;
            margin-bottom: 20px;
        }

        .input-size {
            width: 200px;
        }
    }

</style>
